<script setup>
import { ref } from "vue";
/* 项目 */
const projectList = ref([
	{
		id: 1,
		img: "https://oss.dingdongdr.com/dingdong/images/5e107ccd-5a84-41bb-961c-4f319b8cdbc7.png",
	},
	{
		id: 2,
		img: "https://oss.dingdongdr.com/dingdong/images/0a89cfe2-a917-4b64-ad7b-3a73ccbf5c2e.png",
	},
	{
		id: 3,
		img: "https://oss.dingdongdr.com/dingdong/images/a5ccee64-3e04-4907-9656-bf3395690990.png",
	},
	{
		id: 4,
		img: "https://oss.dingdongdr.com/dingdong/images/a5ccee64-3e04-4907-9656-bf3395690990.png",
	},
	{
		id: 5,
		img: "https://oss.dingdongdr.com/dingdong/images/a5ccee64-3e04-4907-9656-bf3395690990.png",
	},
]);

const value = ref(3);
</script>
<template>
	<div class="flex justify-between bg-white p-[20px]">
		<div>
			<div>
				<span class="mr-[20px] text-[18px]">夏金萍</span
				><van-rate readonly v-model="value" size="3.8vw" color="#ffd21e" void-icon="star" void-color="#eee" />
			</div>
			<div class="my-[10px] text-[13px]">
				<span class="rounded-[4px] bg-[#ffecdd] px-[4px] py-[2px] text-[#e73b00]">主管护师</span
				><span class="mx-[10px]">护理部</span><span>19年经验</span>
			</div>
			<div>浙江大学医学院第二附属医院</div>
		</div>
		<van-image
			round
			width="20vw"
			height="20vw"
			src="http://www.dingdongdr.com/dingdong/file/picFile/20190523141207.jpg"
		/>
	</div>
	<div class="bg-white px-[20px] text-[13px] leading-[20px]">
		2、曾至南京造口治疗师学校进修学习；2013年获得国际造口治疗师证书和江苏省卫生厅伤口/造口/失禁护理专科护士证书2、曾至南京造口治疗师学校进修学习；2013年获得国际造口治疗师证书和江苏省卫生厅伤口/造口/失禁护理专科护士证书2、曾至南京造口治疗师学校进修学习；2013年获得国际造口治疗师证书和江苏省卫生厅伤口/造口/失禁护理专科护士证书
	</div>
	<van-tabs v-model:active="active" line-width="5vw">
		<van-tab title="护理项目"
			><div class="m-[10px] grid grid-cols-4 place-items-center gap-[10px] rounded-[10px] bg-[#ffffff] p-[10px]">
				<img class="h-[76px] w-[76px]" v-for="item in projectList" :key="item.id" :src="item.img" alt="" /></div
		></van-tab>
		<van-tab title="患者评价"
			><div class="m-[10px] rounded-[10px] bg-[#ffffff] p-[10px]">
				<div class="border-b">
					<div>姓名</div>
					<div class="my-[10px] flex justify-between">
						<div>
							<span class="mr-[10px]">伤口护理</span>
							<van-rate readonly v-model="value" size="3.8vw" color="#ffd21e" void-icon="star" void-color="#eee" />
						</div>
						<span>21210526</span>
					</div>
					<div class="my-[6px] ml-[20px]">感谢浙医二院夏金萍老师</div>
					<div class="my-[6px] ml-[20px]">
						<span class="mr-[10px] rounded-[4px] bg-[#f8f5e8] px-[6px] py-[4px]">服务很好</span
						><span class="mr-[10px] rounded-[4px] bg-[#f8f5e8] px-[6px] py-[4px]">护理很好</span
						><span class="mr-[10px] rounded-[4px] bg-[#f8f5e8] px-[6px] py-[4px]">效果很好</span>
					</div>
				</div>
			</div></van-tab
		></van-tabs
	>
</template>
